<template>
 <div class="recommend">
   <scroll class="recommend-content">
     <div>
       <div class="slider-wrapper">
         <div class="slider-content">
           <slider v-if="sliders.length" :sliders="sliders"></slider>
         </div>

         <div class="recommend-list">
           <h1 class="list-title">热门歌单推荐</h1>
           <ul >
             <li  v-for="item in albums"
                  class="item"
                  :key="item.id">
               <div class="icon">
                 <img width="60" height="60"  v-lazy="item.pic">
               </div>
               <div  class="text">
                 <h2 class="name">
                   {{ item.username }}
                 </h2>
                 <p class="title">
                   {{item.title}}
                 </p>
               </div>

             </li>

           </ul>

         </div>

       </div>
     </div>

   </scroll>


 </div>
</template>

<script>
import { getRecommend } from '@/service/recommend'
import Slider from '@/components/base/slider/slider'
import Scroll from '@/components/wrap-scroll'

export default {
  name: 'recommend',
  components:{
    Slider,
    Scroll
  },
  data () {
    return{
      sliders: [],
      albums: []
    }
  },
  async created() {
    const result = await getRecommend()
    this.sliders = result.sliders
    this.albums = result.albums
  }
}
</script>

<style lang="scss" scoped>
.recommend{
  position: fixed;
  width: 100%;
  top: 88px;
  bottom: 0;
  overflow: scroll;
  .recommend-content{
    height: 100%;
    overflow: hidden;
    .recommend-list{
      .list-title{
        height: 65px;
        line-height: 65px;
        text-align: center;
        font-size: $font-size-medium;
        color: $color-theme;
      }
      .item {
        display: flex;
        padding: 0 20px 20px 20px;
        box-sizing: border-box;
        .icon{
          flex: 0 0 60px;
          width: 60px;
          padding-right: 20px;
        }
        .text {
          display: flex;
          flex-direction: column;
          justify-content: center;
          flex: 1;
          line-height: 20px;
          overflow: hidden;
          font-size: $font-size-medium;
          .name {
            margin-bottom: 10px;
            color: $color-text;
          }
          .title {
            color: $color-text-d;
          }
        }
      }
    }
  }
}




</style>
